<template>
  <el-row :gutter="20">
    <el-col
      :span="12"
      :offset="6"
    >
      <div class="grid-content bg-purple">
        <div class="wrap">
          <i class="mark">✲</i>
          <span class="font">姓名：</span>
          <el-input
            placeholder="请输入姓名"
            v-model="name"
            clearable
            class="conent"
            @change="checkName"
          >
          </el-input>
        </div>
        <div class="wrap">
          <i class="mark">✲</i>
          <span class="font">身份证号码：</span>
          <el-input
            placeholder="请输入身份证号码"
            v-model="idNum"
            clearable
            class="conent"
            @change="checkIdNum"
          >
          </el-input>
        </div>
        <div class="wrap wrap-change">
          <i class="mark">✲</i>
          <span class="font">证件照片：</span>
          <div class="block personal">
            <span class="demonstration">个人信息页</span>
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccessPersonalPage"
              :before-upload="beforeAvatarUpload"
            >
              <img
                v-if="personalPage"
                :src="personalPage"
                class="avatar"
              >
              <i
                v-else
                class="el-icon-plus avatar-uploader-icon"
              ></i>
            </el-upload>
          </div>
          <div class="block sample1">
            <span class="demonstration">示例</span>
            <el-image :src="src"></el-image>
          </div>
          <div class="block emblem">
            <span class="demonstration">国徽页</span>
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img
                v-if="emblemPage"
                :src="emblemPage"
                class="avatar"
              >
              <i
                v-else
                class="el-icon-plus avatar-uploader-icon"
              ></i>
            </el-upload>
          </div>
          <div class="block sample2">
            <span class="demonstration">示例</span>
            <el-image :src="src"></el-image>
          </div>
          <span class="font-tip1">1、请上传证件正反面照片，15M以内，jpg、png格式。</span>
          <span class="font-tip2">2、请上传您本人的身份证件。避免边框缺失、字体模糊、闪光、光线过暗、遮挡信息等情况。</span>
        </div>
        <div class="wrap">
          <span class="font">微信号：</span>
          <el-input
            placeholder="请输入微信号"
            v-model="weChat"
            clearable
            class="conent"
            @change="checkWeChat"
          >
          </el-input>
        </div>
        <div class="wrap">
          <span class="font">QQ号：</span>
          <el-input
            type="number"
            placeholder="请输入QQ号"
            v-model="qqNum"
            clearable
            class="conent"
            @change="checkQqNum"
          >
          </el-input>
        </div>
        <div class="wrap">
          <span class="font">开发者职位：</span>
          <el-input
            placeholder="请输入开发者职位"
            v-model="developer"
            clearable
            class="conent"
          >
          </el-input>
        </div>
        <div
          class="wrap change-wrap"
          style="height:55px;"
        >
          <span class="font">自我介绍：</span>
          <el-input
            placeholder="请输入自我介绍"
            v-model="introduce"
            clearable
            maxlength="200"
            show-word-limit
            type="textarea"
            class="conent"
          >
          </el-input>
        </div>
        <el-button
          type="primary"
          class="sub-btn"
          @click="submitClick"
        >提交审核</el-button>
      </div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      src:
        "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
      personalPage: "",
      emblemPage: "",
      name: "",
      idNum: "",
      weChat: "",
      qqNum: "",
      developer: "",
      introduce: ""
    };
  },
  methods: {
    checkName() {
      let reg = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,10}$/;
      if (!reg.test(this.name)) {
        this.$message.error("请输入正确的姓名");
        this.name = "";
      }
    },
    checkIdNum() {
      let value = /^\d{15}|\d{18}$/;
      let special = /^([0-9]){7,18}(x|X)?$/;
      if (!value.test(this.idNum) && !special.test(this.idNum)) {
        this.$message.error("请输入正确的身份证号码");
        this.idNum = "";
      }
    },
    checkWeChat() {
      let reg = /^[a-zA-Z][a-zA-Z\d_-]{5,19}$/;
      if (!reg.test(this.weChat)) {
        this.$message.error("请输入正确的微信号");
        this.weChat = "";
      }
    },
    checkWeChat() {
      let reg = /^[a-zA-Z][a-zA-Z\d_-]{5,19}$/;
      if (!reg.test(this.weChat)) {
        this.$message.error("请输入正确的微信号");
        this.weChat = "";
      }
    },
    checkQqNum() {
      let reg = /^[1-9][0-9]{4,12}$/;
      if (!reg.test(this.qqNum)) {
        this.$message.error("请输入正确的QQ号");
        this.qqNum = "";
      }
    },
    submitClick() {
      let arr = [this.name, this.idNum, this.personalPage, this.emblemPage];
      let acount = 0;
      arr.forEach(item => {
        if (!item) {
          acount++;
        }
      });
      if (acount !== 0) {
        this.$message.error("请检查姓名身份证号与证件照片后重新提交");
      }
      console.log(
        this.name,
        this.idNum,
        this.personalPage,
        this.emblemPage,
        this.weChat,
        this.qqNum,
        this.developer,
        this.introduce
      );
    },
    handleAvatarSuccessPersonalPage(res, file) {
      console.log(file, res);
      this.personalPage = URL.createObjectURL(file.raw);
    },
    handleAvatarSuccess(res, file) {
      console.log(file, res);
      this.emblemPage = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      const isLt15M = file.size / 1024 / 1024 <= 15;
      if (!isJPG && !isPNG) {
        this.$message.error("上传图片只能是 JPG/PNG 格式!");
      }
      if (!isLt15M) {
        this.$message.error("上传图片大小不能超过 15MB!");
      }
      return (isJPG && isLt15M) || (isLt15M && isPNG);
    }
  }
};
</script>

<style lang="css" scoped>
.wrap-change-logo {
  height: 100px;
}
.change-wrap {
  height: 100px;
}
.block {
  width: 150px;
  height: 100px;
}
.sub-btn {
  margin-top: 10px;
  margin-bottom: 10px;
}
.el-row {
  margin-bottom: 20px;
}
.el-col {
  border-radius: 5px;
}
.bg-purple-dark {
  background: white;
}
.bg-purple {
  background: white;
  text-align: center;
}
.grid-content {
  padding-top: 10px;
  border-radius: 4px;
  min-height: 35px;
  text-align: center;
}
.wrap {
  width: 600px;
  height: 40px;
  position: relative;
  margin-left: 150px;
  margin-top: 15px;
}
.wrap-change {
  height: 210px;
  position: relative;
}
.sample1 {
  position: absolute;
  top: 10px;
  left: 255px;
}
.sample2 {
  position: absolute;
  top: 10px;
  left: 560px;
}
.mark {
  position: absolute;
  top: 10px;
  left: -10px;
  color: red;
}
.personal {
  position: absolute;
  top: 10px;
  left: 100px;
}
.emblem {
  position: absolute;
  top: 10px;
  left: 408px;
}
.font-tip1 {
  position: absolute;
  top: 145px;
  left: 100px;
  font-size: 12px;
}
.font-tip2 {
  position: absolute;
  top: 165px;
  left: 100px;
  font-size: 12px;
}
.font {
  position: absolute;
  top: 10px;
  left: 10px;
}
.conent {
  position: absolute;
  top: 0px;
  left: 155px;
  width: 400px;
}
.avatar-uploader .el-upload {
  border: 1px dashed black;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #fd0000;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #fd0000;
  width: 150px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar {
  width: 150px;
  height: 100px;
  display: block;
}
</style>